<template>
  <div style="background-color: #FFFFFF; width: 100%; height: 1000px; padding: 15px;">
    <div style="margin-left: 26px; font-size: 13px; font-weight: bold;">
      <span>历史轨迹曲线</span>
    </div>
    <div style="margin-left: 20px;margin-top: 20px; padding:5px">
      <a-row :gutter="16">
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择公司"
            v-model="queryParam.company"
            dictCode="crm_company,name,id"
            disabled
          />
        </a-col>
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择车间"
            v-model="queryParam.workshop"
            dictCode="workshop"
          />
        </a-col>
        <a-col :span="6">
          <j-dict-select-tag
            style="width: 100%"
            placeholder="请选择工序"
            v-model="queryParam.productCategory"
            dictCode="product_category"
          />
        </a-col>
        <a-col :span="6">
          <a-select
            style="width: 100%;"
            placeholder="请选择机台"
            v-model="selectQuery.deviceNo"
            :key="queryParam.productCategory"
            @change="handleChangeCraft"
          >
            <a-select-option v-for="(item,index) in deviceList" :key="index" :value="item.deviceNo">
              {{ item.workingProcedure_dictText }}{{ item.deviceNo }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="5">
          <a-cascader v-model="ParameterType" style="width: 100%;margin-top: 10px;" :options="options" placeholder="请选择参数类型" @change="onChangeCascader"/>
        </a-col>
        <a-col :span="14">
          <RangePicker v-model="queryTime" @change="onChange"></RangePicker>
        </a-col>
        <a-col :span="2">
          <a-button @click="onSearch" type="primary" style="margin-top: 10px;">
            查询
          </a-button>
        </a-col>
      </a-row>
      <div>
        <div ref="graph" class="graph"></div>
      </div>

      <div style="margin-top: 30px;">
        <a-table :columns="columns" :data-source="data">
          <a slot="name" slot-scope="text, record">{{ text }}</a>
        </a-table>
      </div>
      <!--      @click="edit(record)-->
    </div>
  </div>
</template>
<script>
import RangePicker from '@comp/RangePicker/RangePicker.vue'

const columns = [
  {
    title: '公司',
    dataIndex: 'company',
    key: 'company',
    width: 300,
  },
  {
    title: '工序分类',
    dataIndex: 'productCategory',
    key: 'productCategory',
    width: 200,
  },
  {
    title: '车间',
    dataIndex: 'workshop',
    key: 'workshop',
    width: 300,
  },
  {
    title: '设备编号',
    dataIndex: 'deviceNo',
    key: 'deviceNo',
    width: 200,
  },
  {
    title: '运行参数',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 300,
  },

];

const data = [
  {
  }
]

import * as echarts from 'echarts'
import { getAction } from '@api/manage'
import { getCrmDeviceParamList } from '@api/api'

export default {
  components: { RangePicker },
  data() {
    return {
      queryTime: null,
      columns,
      data,
      ParameterType:undefined,
      // 查询条件
      queryParam:{
        company: '1771136798305476610',
        productCategory: undefined,
        workingProcedure: undefined,
        workshop: undefined,
      },
      // 查询条件
      selectQuery: {
        // 机台号
        deviceNo: undefined,
        // 开始时间
        startTime: undefined,
        // 参数id
        paramId: undefined,
        // 结束时间
        endTime: undefined,
        pageSize: -1
      },
      deviceList: [],
      // 显示工序和机台的对应关系
      /*
      * productCategory（细纱1；粗纱2；头并4；末并5；梳棉6；抓棉7；多仓8；精开棉9；络筒10；打包11）
        workingProcedure（清花1；梳棉2；并条4；粗纱5；细纱6；络筒7；打包8；）
        清花对应：抓棉、多仓、精开棉；并条对应：头并、末并
      * */
      workingProcedure: {
        // 细纱1 -> 细纱6
        1: 6,
        // 粗纱2 -> 粗纱5
        2: 5,
        // 抓棉7 -> 清花1
        7: 1,
        // 多仓8 -> 清花1
        8: 1,
        // 精开棉9 -> 清花1
        9: 1,
        // 头并4 -> 并条4
        4: 4,
        //末并5 -> 并条4
        5: 4,
        // 梳棉6  -> 梳棉2
        6: 2,
        // 络筒10  -> 络筒7
        10: 7,
        // 打包11 -> 打包8
        11: 8
      },
      options: [
        {
          value: '运行参数',
          label: '运行参数',
          children: [
            {
              value: '',
              label: '',
            }
          ]
        }
      ],
    }
  },
  mounted() {
    this.getSpeedData()
  },

  watch: {
    'queryParam.workshop'() {
      this.getDeviceList()
    },
    'queryParam.productCategory'() {
      this.getDeviceList()
    },
    selectQuery: {
      handler() {
        const data = Object.keys(this.selectQuery)
        for (let i = 0; i < data.length; i++) {
          if (!this.selectQuery[data[i]]) {
            return
          }
        }
        this.onSearch()
      },
      deep: true
    }
  },
  methods: {
    getSpeedData() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.graph)
      }

      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: 40
          // right: 100
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          // 优化最大值和最小值不明显的问题
          min: 'dataMin', //取最小值为最小刻度
          max: 'dataMax' //取最大值为最大刻度
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      }
      this.myChart.setOption(option)
    },

    getDeviceList() {
      this.selectQuery.deviceNo = undefined
      this.deviceList = []
      // 车间和工序都选才去查询
      if (!this.queryParam.workshop || !this.queryParam.productCategory) {
        return
      }

      const params = {
        workshop: this.queryParam.workshop,
        workingProcedure: this.workingProcedure[this.queryParam.productCategory],
        pageSize: -1
      }
      getAction('/crm_device/crmDevice/list', params).then(res => {
        this.deviceList = res.result.records
      })

    },
    onSearch() {
      const data = Object.keys(this.selectQuery)
      for (let i = 0; i < data.length; i++) {
        if (!this.selectQuery[data[i]]) {
          this.$message.warning('请选择完整的查询条件')
          return
        }
      }

      getAction('/crm_device_param_record/crmDeviceParamRecord/productionStatisticsHistoricalTrajectory', this.selectQuery).then(
        res => {
          this.data = res.result.records
          this.getSpeedData()
        }
      )
    },
    onChange(date, dateString) {
      this.selectQuery.startTime = this.queryTime[0]
      this.selectQuery.endTime = this.queryTime[1]
    },
    handleChangeCraft(value) {
      this.queryParam.workingProcedure= this.workingProcedure[this.queryParam.productCategory]
      this.selectQuery.deviceNo = value;
      getCrmDeviceParamList(this.queryParam).then((res)=>{
        this.options[0].children =res.result.records.map(item => ({
          label: item.paramName,
          value: item.id
        }));
      })
    },
    onChangeCascader(_value, selectedOptions) {
      this.columns[4].title = "运行参数/"+selectedOptions[1].label
      this.selectQuery.paramId = _value[1];
    },
  },
  beforeDestroy() {
    this.myChart.dispose()
  }

}
</script>

<style lang="less" scoped>
.graph {
  width: 100%;
  height: 400px;
}
</style>
